<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="shortcut icon" href="./../favicon.png">
    <link href="./../assets/css/toastr.min.css" rel="stylesheet">
    <script src="./../assets/js/jquery.js"></script>
    <script src="./../assets/js/clipboard.min.js"></script>
    <style>
        body{
            background-image: url("./../assets/img/bg.png");
            background-size: 100% 100%;
            margin: 0;
            position: relative;
        }
        a{
            text-decoration: none;
        }
        input{
            border: none;
        }
        ul{
            list-style: none;
        }
        .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
        .container{
            margin: 0 auto;
            min-width: 320px;
            max-width: 600px;
            padding-bottom: 25px;
        }

        .logo{
            padding: 20px 20px 20px 20px;
        }
        .logo img{
            width: 16%;
        }
        .logo .img2{
            margin-left: 10px;
        }
        .content{
            padding: 2% 0 5% 0;
            background-color: #fff;
            /* height: 1000px; */
            width: 95%;
            margin: 0 auto;
            border-radius: 15px;
        }
        .one{
            padding: 0 5% 0 5%;
            background-color: #fff;
            border-bottom: 1px solid #E7E7E7;
        }
        .log_out{
            margin-top: 15px;
            margin-bottom: 15px;
            font-size: 14px;
        }
        .log_out .left{
            float: left;
            color: #666666;
        }
        .log_out .right{
            float: right;
        }
        .log_out .right a{
            color: #2564EC;
        }
        .card{
            background: -webkit-linear-gradient(left, #D7D7D7, #999999);
            background: -o-linear-gradient(left,#D7D7D7, #999999);
            background: -moz-linear-gradient(left,#D7D7D7, #999999);
            background: -ms-linear-gradient(left,#D7D7D7, #999999);
            height: 165px;
            padding: 35px 7% 0px 7%;
            position: relative;
            border-radius: 15px;
        }
        .card .top{
            font-size: 18px;
            font-weight: 700;
        }

        .card-1 {
            /*height: 10px;*/
            /*width: 50%;*/
            /*background-color: #35A5FF;*/
            /*float: right;*/
            /*margin-right: -8%;*/
            /*border-bottom-left-radius: 5px;*/
            /*border-top-left-radius: 5px;*/
            /*margin-top: 10px;*/
            position: absolute;
            right: 28px;
            color: #ffffff;
            font-size: 20px;
            font-weight: bold;
            bottom: 24px;
        }

        .card-2 {
            height: 13px;
            width: 80%;
            margin-top: 8px;
            background-color: #7FD7FF;
            float: right;
            margin-right: -8%;
            border-bottom-left-radius: 8px;
            border-top-left-radius: 8px;
        }

        .card-3 {
            height: 4px;
            width: 55%;
            margin-top: 13px;
            background-color: #CBEEFF;
            float: right;
            margin-right: -8%;
            border-bottom-left-radius: 3px;
            border-top-left-radius: 3px;
        }


        .bottom{
            position: absolute;
            bottom: 25px;
        }
        .bottom .yiyao{
            margin-bottom: 7px;
        }
        .jiangli{
            /* width: 90%; */
            /*height: 30px;*/
            padding: 15px 0 12px 3%;
            font-size: 12px;
            color: #666666;
            /* border-bottom: 1px solid #ccc; */
        }
        .jiangli span {
            margin-bottom: 5px;
            display: block;
            font-size: 14px;
        }
        .two{
            padding: 0 6% 0 6%;
            width: 90%;
            padding-bottom: 15px;
            border-bottom: 1px solid #E7E7E7;
        }
        .two .more {
            /* height: 115px; */
            padding-top: 15px;
        }
        .two .more span{
            color: #333;
            font-size: 14px;
        }
        .two .more .top{
            margin-top:15px;
        }
        .two .more .top input{
            width: 58%;
            height: 40px;
            padding:0 0 0 5px;
            color:#ccc;
            float: left;
            margin-right: 20px;
            border: 1px solid #A7A7A7;
            outline: none;
        }
        .two .more .top .copy{
            outline: none;
            border: none;
            overflow:hidden ;
            width: 33%;
            height: 43px;
            background-color: #2A70EB;
            border-radius:20px;
            font-size: 12px;
            color: #fff;
            line-height: 43px;
            /* padding-left: 3%; */
            text-align: center;
        }

        /* 地址 */
        .two .address {
            /* height: 115px; */
            margin-top: 10px;
        }
        .two .address span{
            color: #333;
            font-size: 14px;
        }
        .two .address .top{
            margin-top:15px;
            margin-bottom: 10px;
        }
        .two .address .top input{
            width: 58%;
            height: 40px;
            padding:0 0 0 5px;
            color:#ccc;
            float: left;
            margin-right: 20px;
            border: 1px solid #A7A7A7;
            outline: none;
        }
        .two .address span.font-size-13px {
            font-size: 13px;
            color: #666666;
        }
        .two .address a {
            text-decoration:underline;
            font-size: 13px;
            color: #2A6FEA;
        }
        .two .address .top .copy{
            overflow:hidden ;
            width: 32%;
            height: 43px;
            background-color: #2A70EB;
            border-radius:20px;
            font-size: 14px;
            color: #fff;
            line-height: 43px;
            /* padding-left: 3%; */
            text-align: center;
        }

        .three .info {
            font-size: 12px;
            margin-top: 10px;
            margin-left: 15px;
        }

        .three table {
            width: 100%;
            text-align: center;
        }
        .three table td {
            width: 33%;
        }
        .three table td img {
            height: 45px;
            padding: 20px 10px 10px 10px;
        }
        .three table td span {
            /*line-height: 83px;*/
            display: inline-block;
            vertical-align: top;
            font-size: 12px;
        }
        a {
            color: #000000;
        }
        .QRcode-img {
            text-align: center;
            display: none;
        }

        select.ln {
            position: absolute;
            /* -moz-appearance: none; */
            /* -webkit-appearance: none; */
            width: 80px;
            height: 31px;
            outline: none;
            background: none;
            font-size: 15px;
            padding: 0 0 0 8px;
            border: 1px solid #326dfb;
            border-radius: 0;
            color: #326dfb;
            top: 10px;
            right: 10px;
            border: none;
            background-color: #ffffff;
            /* border-radius: 7px; */
            /* box-shadow: 1px 1px 2px #666666; */
        }
        select.ln option {
        }

        @media screen and (max-width: 650px) {
            select.ln {
                appearance: none;
                -moz-appearance: none;
                -webkit-appearance: none;
            }
        }
        .two .address span.my-address {
            word-wrap:break-word;
            color: #BBBBBB;
        }
        .two .address span.label {
            font-size: 13px;
            color: #666666;
        }
        .display-none {
            display: none;
        }
        .modal {
            background-color: #000000;
            position: absolute;
            top: 0;
            left: 0;
            opacity: .5;
            width: 100%;
            height: 100%;
            z-index: 99;
        }
        .modal-content {
            border-radius: 6px;
            color: #666666;
            max-width: 300px;
            background-color: #ffffff;
            /* width: 76%; */
            margin-left: 50%;
            left: -175px;
            top: 30%;
            position: absolute;
            z-index: 100;
            padding: 30px;
        }
        .modal-content p {
            word-wrap:break-word;
            margin-bottom: 0;
            margin-top: 8px;
        }
        .modal-content .modal-wallet {
            color: #4A90E2;
        }
        .modal-content .tittle {
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color: #666666;
        }
        .modal-content div {
            text-align: center;
        }
        .modal-content div button {
            outline: none;
            width: 44%;
            margin: 10px 6px;
            background-color: #2A70EB;
            border: 0;
            color: #ffffff;
            padding: 12px;
            border-radius: 23px;
            font-size: 16px;
        }
        .modal-content div button.cancle {
            background-color: #D8D8D8;
            color: #666666;
        }

    </style>
    <title>WFee</title>
</head>
<body>
<div class="container">

    <div class="modal display-none">
    </div>
    <div class="modal-content display-none">
        <p class="tittle label40"></p>
        <p class="label41"></p>
        <p class="modal-wallet"></p>
        <p class="label42"></p>
        <div>
            <button class="cancle label43"></button>
            <button class="wallet-submie label44"></button>
        </div>
    </div>
    <div class="logo">
        <select class="ln"><option value="en"> Engilsh </option><option value="zh">中文</option></select>
        <img src="./../assets/img/001.png" alt="">
        <img src="./../assets/img/002.png" alt="" class="img2">
    </div>
    <div class="content">
        <div class="one">
            <div class="log_out clearfix">
                <div class="left">
                    <span class="account"></span>
                </div>
                <div class="right">
                    <a class="logout label10"></a>
                </div>
            </div>
            <div class="card">
                <div class="top clearfix">
                    <span class="label11"></span>
                    <span class="mywfeeNum"></span>
                    <span class="label12"></span>
                </div>
                <div class="card-1 label54"></div>
                <!--<div class="card-2"></div>-->
                <!--<div class="card-3"></div>-->
                <div class="bottom">
                    <div class="yiyao">
                        <span class="label13"></span>
                        <span class="invitingPersonNum"></span>
                        <span class="label14"></span>
                    </div>
                    <div class="huode">
                        <span class="label15"></span>
                        <span class="invitingAwards"></span>
                        <span class="label16"></span>
                    </div>
                </div>
            </div>
            <div class="jiangli">
                <span class="label17"></span>
                <!--<span class="label50" style="font-size: 13px;color: red"></span>-->
                <!--<span class="label51" style="font-size: 13px;color: red"></span>-->
            </div>
        </div>
        <div class="two display-none">
            <div class="address label ">
                <span class="label33"></span>
                <br>
                <span class="my-address"></span>
                <br>
                <span class="label label34"></span>
            </div>
        </div>
        <div class="three">
            <div class="info label23"></div>
            <table>
                <tbody>
                    <tr>
                        <td class="QRcode-a">
                            <a href="http://www.wfee.info" target="_blank">
                                <img src="./../assets/img/006.png" alt="">
                                <br>
                                <span class="label25"></span>
                            </a>
                        </td>
                        <td class="QRcode-a">
                            <img src="./../assets/img/003.png" alt="">
                            <br>
                            <span class="label24"></span>
                        </td>
                        <td>
                            <a href="https://t.me/joinchat/IFyLGhBV1rXILhSZDBSGdA" target="_blank">
                                <img src="./../assets/img/004.png" alt="">
                                <br>
                                <span>telegram</span>
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="QRcode-img">
                <img style="width: 200px;" src="./../assets/img/005.jpg" alt="">
            </div>
        </div>
    </div>

</div>
</body>
<script src="./../assets/js/toastr.min.js"></script>
<script src="./../assets/js/label.js"></script>
<script>

    var host = window.location.host;

    var lang;
    var setLabel = function (value) {
        // console.log(value)
        $('.label10').html(value.label10);
        $('.label11').html(value.label11);
        $('.label12').html(value.label12);
        $('.label13').html(value.label13);
        $('.label14').html(value.label14);
        $('.label15').html(value.label15);
        $('.label16').html(value.label16);
        $('.label17').html(value.label17);
        $('.label18').html(value.label18);
        $('.label19').html(value.label19);
        $('.label20').html(value.label20);
        $('.label21').val(value.label21);
        $('.label22').html(value.label22);
        $('.label23').html(value.label23);
        $('.label24').html(value.label24);
        $('.label25').html(value.label25);
        $('.label33').html(value.label33);
        $('.label34').html(value.label34);
        $('.label40').html(value.label40);
        $('.label41').html(value.label41);
        $('.label42').html(value.label42);
        $('.label43').html(value.label43);
        $('.label44').html(value.label44);
        $('.label45').html(value.label45);
        $('.label46').html(value.label46);
        $('.label47').html(value.label47);
        $('.label48').html(value.label48);
        $('.label54').html(value.label54);
    };

    // 初始化获取浏览器语言版本
    lang = getLang();
    // 选择框更改walue
    $('.ln').val(lang.type);
    // 填充网页语言
    setLabel(lang);

    $(document).ready(function () {

        // 监听语言选择框
        $('.ln').change(function () {
            lang = getLang($(this).val());
            setLabel(lang);
        });

        // 复制邀请码实例化
        var clipboard = new Clipboard('.copy');
        // 是否复制成功
        clipboard.on('success', function(e) {
            toastr.success(lang.label31)
        });
        clipboard.on('error', function(e) {
            toastr.error(lang.label32)
        });

        // 当前用户
        $('.account')[0].innerHTML = getCookie('account');

        var token = getCookie('token');
        // 不存在登录token的场合 返回登录
        if (!token) {
            location.href = './user/lgin';
            return false;
        }
        var parameter = {
            "email": getCookie('account')
        };

        $.ajax({
            url: 'http://' + host + '/user/wfinfo',
            processData: true,
            type: 'POST',
            contentType: 'application/json;charset=utf-8',
            timeout: 6000,
            data: JSON.stringify(parameter),
            beforeSend: function(request) {
                request.setRequestHeader('authorization', token);
            },
            success: function (data, status) {
                // console.log(data);
                if (data.code == 200) {
                    // 链接
                    $('.my-url').val(data.data.invitingUrl);
                    // 当前金币数
                    $('.mywfeeNum')[0].innerHTML = data.data.mywfeeNum;
                    // 邀请奖励的wfee币个数
                    $('.invitingAwards')[0].innerHTML = data.data.invitingAwards;
                    // 邀请人数
                    $('.invitingPersonNum')[0].innerHTML = data.data.invitingPersonNum;
                    // 我的以太坊地址
                    if (data.data.wallet) {
                        $('.my-address')[0].innerHTML = data.data.wallet;
                        $('.two').removeClass('display-none')
                    }

                } else {
                    console.log(data.msg)
                }
            },
            error: function (XHR, status, error) {
            }
        });

        // 退出登录
        $('.logout').on('click', function () {
            delCookie('account');
            delCookie('token');
            delCookie('vpnId');
            delCookie('refreshToken');
            // 返回登陆页面
            location.href = './user/lgin'

        });

        // 点击微信二维码
        $('.QRcode-a').on('click', function () {
            $('.QRcode-img').slideToggle()
        });

        // 点击提交按钮
        $('.submit').on('click', function () {

            var wallet = $('.wallet').val();
            if (!wallet) {
                toastr.error(lang.label35)
            } else if (!isAddress(wallet)){
                toastr.error(lang.label36)
            } else {
                // 确认提示
                $('.modal-wallet').html($('.wallet').val());
                $('.modal').fadeIn("slow");
                $('.modal-content').fadeIn("slow");
                // $('.modal-content').removeClass('display-none')
            }
        });

        // 确认提交
        $('.wallet-submie').on('click', function () {
            var parameter = {
                'account': $('.account').html(),
                'wallet': $('.wallet').val()
            };
            $.ajax({
                url: 'http://' + host + '/wallet/save',
                processData: true,
                type: 'POST',
                contentType: 'application/json;charset=utf-8',
                timeout: 6000,
                data: JSON.stringify(parameter),
                beforeSend: function(request) {
                    request.setRequestHeader('authorization', token);
                },
                success: function (data, status) {
                    $('.modal-content').fadeOut("slow");
                    $('.modal').fadeOut("slow");
                    // console.log(data);
                    if (data.code == 200) {
                        document.location.reload();
                    } else if (data.code == 801){
                        toastr.warning(lang.label37);
                    } else if (data.code == 802){
                        toastr.warning(lang.label38);
                    } else {
                        toastr.error(lang.label39)
                    }
                },
                error: function (XHR, status, error) {
                    toastr.error(lang.label39);
                }
            });


        });

        // 关闭模态框
        $('.cancle').on('click', function () {
            $('.modal-content').fadeOut("slow");
            $('.modal').fadeOut("slow");
        })

    });
    
    var getCookie = function (name) {
        var aCookie = document.cookie.split('; ');
        for (var i = 0; i < aCookie.length; i++) {
            var aCrumb = aCookie[i].split('=');
            if (name === aCrumb[0]) {
                return unescape(aCrumb[1])
            }
        }
        return null;
    };

    var delCookie =  function (name) {
        var exp = new Date();
        exp.setTime(exp.getTime() - 1);
        document.cookie = name + '=' + '' + ';expires=' + exp.toGMTString()
    };

    var isAddress = function (address) {
        if (!/^(0x)?[0-9a-f]{40}$/i.test(address)) {
            // check if it has the basic requirements of an address
            return false;
        } else if (/^(0x)?[0-9a-f]{40}$/.test(address) || /^(0x)?[0-9A-F]{40}$/.test(address)) {
            // If it's all small caps or all all caps, return true
            return true;
        } else {
            // Otherwise check each case
            return true;
        }
    };

</script>
</html>
